<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
		<title>接任务</title>
	</head>
	<link rel="stylesheet" href="font/iconfont.css" />
	<link rel="stylesheet" href="css/css.css" />
	<link rel="stylesheet" href="dist/lib/weui.min.css">
	<link rel="stylesheet" href="dist/css/jquery-weui.min.css">
	<link rel="stylesheet" href="js/layui/css/layui.css" />
	<script type="text/javascript" src="dist/lib/jquery-2.1.4.js" ></script>
	<script src="dist/js/jquery-weui.min.js"></script>
	<script type="text/javascript" src="js/layui/layui.js" ></script>
	<script type="text/javascript" src="dist/lib/fastclick.js"></script>
	<link rel="stylesheet" href="css/LArea.css">
	<!--<style>
		.weui-switch, .weui-switch-cp__box{ height:22px;}
		.weui-switch-cp__box:before, .weui-switch:before{height: 20px;}
		.weui-switch-cp__box:after, .weui-switch:after {height: 20px;}
		.weui-switch-cp__input:checked~.weui-switch-cp__box, .weui-switch:checked {border-color: #FF6726;background-color: #FF6726;}
		.weui-cell_switch{padding:10px 15px;}
		.weui-slider{padding: 0px 0px 15px !important;}
		.weui-slider__track{background-color: #FF6726;}
		.toolbar, .toolbar .title{font-size:0.75rem;}
		.toolbar .close-select{color: #FF6726;}
		.layui-upload-img{width:100%;overflow:60px;height:100%;/*background: no-repeat 50%;*/background-size: cover;}
		.layui-upload{position: relative;}
		#upload_1,#upload_2,#upload_3,#upload_4{position: absolute;left:0px;top:0px;right:0px;bottom:0px; z-index: 10;}		
		.weui-cells_radio .weui-check:checked+.weui-icon-checked:before{color: #FF6726 !important;}			
	</style>-->
	<style>
		* {
	margin: 0;
	padding: 0;
	-webkit-appearance: none; //去掉浏览器默认样式
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	box-sizing: border-box;
	}
	html,
	body {
		margin: 0 auto;
		width: 100%;
		min-height: 100%;
		overflow-x: hidden;
		-webkit-user-select: none;
	}	
	body {
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		-webkit-text-size-adjust: 100%; //关闭自动调整字体
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}
	</style>
	<body ontouchstart style="background-color:#f7f7f7;" >
		<header class="wy-header" style="background-color: #fff;">
			<div class="wy-header-icon-back">
				<a href="javascript:history.back(-1)"><i class="iconfont icon-left6"></i></a>
			</div>
			<div class="wy-header-title">绑定淘宝账号</div>
		</header>
		
		<!--绑定添加淘宝号-->
				<div class="weui-cells" style="margin-top:5px;">
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<p class="font-sm-color3">注意事项</p>
						</div>
					</div>
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<p class="font-sm-color2 txt-lt">账号审核时间<i class="font-sm-color1">周一至周五9:00 - 18:00</i>
								账号提交一个工作日内完成审核，如遇周末或者节假日顺延，审核工作人工进行，新手务必查看<i class="font-sm-color1 open-popup" data-target="#jietudemo">截图实例</i></p>
						</div>
					</div>
				</div>
				<div class="weui-cells addtaobao" style="margin-top:5px;">
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<p class="font-sm-color3">账号信息</p>
						</div>
					</div>
					<div class="weui-cell bg">
						<div class="weui-cell__bd">
							<input type="text" placeholder="请输入淘宝账号" class="weui-input font-sm-color2"/>	
						</div>
					</div>
					<div class="weui-cell bg">
						<div class="weui-cell__bd">
							<input type="text" placeholder="收货人姓名" class="weui-input font-sm-color2"/>	
						</div>
					</div>
					<div class="weui-cell bg">
						<div class="weui-cell__bd">
							<input type="tel" placeholder="收货人手机" class="weui-input font-sm-color2"/>	
						</div>
					</div>
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<input type="code" placeholder="请输入手机验证码" class="weui-input font-sm-color2"/>	
						</div>
					</div>
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<!--<input type="city" placeholder="请选择城市" class="weui-input font-sm-color2"/>	-->
							<input id="demo1"  class="weui-input font-sm-color2" type="text" readonly="" placeholder="请选择所在城市"   style="flex: 1;color:#000!important;">
							<input id="value1" type="hidden" value="17,191,3796">
						</div>
					</div>
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<input type="address" placeholder="请输入详细地址" class="weui-input font-sm-color2"/>	
						</div>
					</div>
				</div>
				<div class="weui-cells addtaobao" style="margin-top:5px;">
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<p class="font-sm-color3">号码属性(与实名认证的身份证信息一致)</p>
						</div>
					</div>
					
					<div class="weui-cells weui-cells_form" style="margin-top:-1px;">
					    <div class="weui-cell">
				        	<div class="weui-cell__hd">
				        		<label for="name" class="weui-label">性别</label>
				        	</div>
				        	<div class="weui-cell__bd">
					          	<input class="weui-input" id="xingbie" type="text" value="" placeholder="请选择性别">
					        </div>
				        </div>
				        <div class="weui-cell">
				        	<div class="weui-cell__hd">
				        		<label for="name" class="weui-label">年龄</label>
				        	</div>
				        	<div class="weui-cell__bd">
					          	<input class="weui-input" id="age" type="text" value="" placeholder="请输入你的年龄">
					        </div>
				        </div>
				      
				        <div class="weui-cell">
				        	<div class="weui-cell__hd">
				        		<label for="name" class="weui-label">信誉</label>
				        	</div>
				        	<div class="weui-cell__bd">
					          	<input class="weui-input" id="xinyu" type="text" value="" placeholder="请选择信誉">
					        </div>
				        </div>
				        
				        <div class="weui-cell">
				        	<div class="weui-cell__hd">
				        		<label for="name" class="weui-label">淘气值</label>
				        	</div>
				        	<div class="weui-cell__bd">
					          	<input class="weui-input" id="taoqizhi" type="text" value="" placeholder="请选择淘气值">
					        </div>
				        </div>
				        
				        <div class="weui-cell">
				        	<div class="weui-cell__hd">
				        		<label for="name" class="weui-label">订单编号</label>
				        	</div>
				        	<div class="weui-cell__bd">
					          	<input class="weui-input" id="ordercode" type="text" value="" placeholder="请输入你的淘宝中任意订单的订单编号">
					        </div>
				        </div>
				        
				        <div class="weui-cell">
				        	<div class="weui-cell__hd">
				        		<label for="name" class="weui-label">购物类目</label>
				        	</div>
				        	<div class="weui-cell__bd">
					          	<input class="weui-input" id="gouwuleimu" type="text" value="" placeholder="请选择经常购物的3-5个购物类目">
					        </div>  
				        </div>  
					</div>
						
					<div class="weui-cell bg" style="margin-top:-1px;">
						<div class="weui-cell__bd">
							<p class="font-sm-color3 txt-center">点击上传图片(上传后，点击看大图)</p>
							<p class="font-sm-color1 txt-center open-popup" data-target="#upload_demo">截图实例</p>
						</div>
					</div>
							
					<div class="weui-row" style="padding: 0px 15px 0px 15px;">
						<div class="weui-col-25">
							<div class="layui-upload">
							  	<div class="layui-upload-list">
							    	<img class="layui-upload-img" id="upload_img1" src="img/pic_160.png">
							    	<p id="Text1" style="display: none;"></p>
							  	</div>
							  	<p class="" id="upload_1"></p>
							</div>
							<p class="txt-center font-sm-color2">信誉等级</p>
						</div>
						<div class="weui-col-25">
							<div class="layui-upload">
								
								<div class="layui-upload-list">
								
									<img class="layui-upload-img" id="upload_img2" src="img/pic_160.png">
									<p id="Text2" style="display: none;"></p>
								</div>
								<p class="" id="upload_2"></p>
							</div>
							<p class="txt-center font-sm-color2">淘气值</p>
						</div>
						<div class="weui-col-25">
							<div class="layui-upload">
								
								<div class="layui-upload-list">
									<img class="layui-upload-img" id="upload_img3" src="img/pic_160.png">
									<p id="Text3" style="display: none;"></p>
								</div>
								<p class="" id="upload_3"></p>
							</div>
							<p class="txt-center font-sm-color2">实名认证</p>
						</div>
						<div class="weui-col-25">
							<div class="layui-upload">
								<div class="layui-upload-list">
									<img class="layui-upload-img" id="upload_img4" src="img/pic_160.png">
									<p id="Text4" style="display: none;"></p>
								</div>
								<p class="" id="upload_4"></p>
							</div>
							<p class="txt-center font-sm-color2">花呗</p>
						</div>
						<div class="weui-col-100 font-sm-color1 p10 txt-center">
							花呗：选填，开通花呗账号接单可获得更过佣金
						</div>
					</div>
					<div style="margin: 0px 15px;">
						<button type="submit" class="weui-btn addID_tbn">提交审核</button>
					</div>	
				</div>

		<script>
			layui.use('upload', function(){
			  var $ = layui.jquery
			  ,upload = layui.upload;
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_1'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text11');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_2'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img2').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text2');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_3'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img3').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text3');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_4'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img4').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text4');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			});
		</script>


		
		<script>
			$(".typeclass,.typeclass1").on("click",function(){
				$(this).next().trigger("click");	
			})
			
		      //性别
		      $("#xingbie").select({
		        title: "请选择性别",
		        items: ["男", "女"],
		        onChange: function(d) {
		          console.log(this, d);
		        },
		        onClose: function() {
		          console.log("close");
		        },
		        onOpen: function() {
		          console.log("open");
		        },
		      });
		     
		     //信誉
		     $("#xinyu").select({
		        title: "请选择信誉",
		        items: ["2星", "3星","4星","5星","1钻","2钻","3钻","4钻","5钻","皇冠及以上"],
		        onChange: function(d) {
		          console.log(this, d);
		        },
		        onClose: function() {
		          console.log("close");
		        },
		        onOpen: function() {
		          console.log("open");
		        },
		      });
		      
		      //淘气值
		     $("#taoqizhi").select({
		        title: "请选择淘气值",
		        items: ["1000以下", "1000-1500","1500-2000","2000以上"],
		        onChange: function(d) {
		          console.log(this, d);
		        },
		        onClose: function() {
		          console.log("close");
		        },
		        onOpen: function() {
		          console.log("open");
		        },
		      });
		      
		      //购物类目
		    
		      $("#gouwuleimu").select({
		        title: "请选择经常购买的3-5个购物类目",
		        multi: true,
		        min: 3,
		        max: 5,
		        items: [
		          {
		            title: "服装鞋包",
		            value: 1,
		            description: "额外的数据1"
		          },
		          {
		            title: "手机数码",
		            value: 2,
		            description: "额外的数据2"
		          },
		          {
		            title: "家用电器",
		            value: 3,
		            description: "额外的数据3"
		          },
		          {
		            title: "美装饰品",
		            value: 4,
		            description: "额外的数据4"
		          },
		          {
		            title: "母婴用品",
		            value: 5,
		            description: "额外的数据5"
		          },
		          {
		            title: "家居建材",
		            value: 6,
		            description: "额外的数据6"
		          },
		          {
		            title: "百货食品",
		            value: 7,
		            description: "额外的数据7"
		          },
		          {
		            title: "运动户外",
		            value: 8,
		            description: "额外的数据8"
		          },
		          {
		            title: "文化娱乐",
		            value: 9,
		            description: "额外的数据9"
		          },
		          {
		            title: "生活服务",
		            value: 10,
		            description: "额外的数据10"
		          },
		          {
		            title: "汽摩配件",
		            value: 11,
		            description: "额外的数据11"
		          },
		          {
		            title: "游戏话费",
		            value: 12,
		            description: "额外的数据12"
		          },
		        ],
		        onChange: function(d) {
		          console.log(this, d);
		        },
		        onClose: function (d) {
		          console.log('close')
		        }
		      });
		      
		      
		      $(document).on("click", "#upload_img1", function() {
			    $.actions({
			      title: "选择操作",
			      onClose: function() {
			        console.log("close");
			      },
			      actions: [
			        {
			          text: "相册",
			          className: "color-warning",
			          onClick: function() {
			           $("#upload_1").trigger("click");
			          }
			        }
			      ]
			    });
			  });
      
		</script>
		<script src="js/LAreaData1.js"></script>
		<script src="js/LAreaData2.js"></script>
		<script src="js/LArea.js"></script>
		<script>
		var area1 = new LArea();
		area1.init({
			'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			'valueTo': '#value1', //选择完毕后id属性输出到该位置
			'keys': {
				id: 'id',
				name: 'name'
			}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			'type': 1, //数据源类型
			'data': LAreaData //数据源
		});
		area1.value=[1,13,3];//控制初始位置，注意：该方法并不会影响到input的value
		var area2 = new LArea();
		area2.init({
			'trigger': '#demo2',
			'valueTo': '#value2',
			'keys': {
				id: 'value',
				name: 'text'
			},
			'type': 2,
			'data': [provs_data, citys_data, dists_data]
		});
</script>
		
		
	</body>
</html>